<!-- 房屋管理 -->
<template>
	<div>
	  <div class="header">
		<div class="title">
		  
			<div style="width: 30%; float: left;display: none;">
			  <a-space direction="vertical" style="width: 100%; margin-left: 13px">
				<a-input-group compact>
				  <a-cascader
					v-model:value="value18"
					style="width: 100%"
					:options="options1"
					expand-trigger="hover" 
					placeholder="请选择行政区"
					changeOnSelect @change="onChange"
				  />
				</a-input-group>
			  </a-space>
			</div>
			
			  <!-- <div style="width: 20%;float: left;margin-top: 15px;margin-left: 25px;margin-bottom: 15px;"> 
				  <a-input-search
				v-model:value="txtKeyWord"
				placeholder="请输入姓名、地址或房屋编号进行查询"
				enter-button
				style="width: 100%"
				@search="searchBtn"
			  />
			  </div> -->
			  <div style="float: right; width: 27%">
          <a-space style="float: right; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space> 
        </div>
		</div>
		<a-table style="margin-top: 0px;"
		  :dataSource="tableData"
		  :columns="displayColumns"
		  :pagination="false"
		  :scroll="{ x: 1500, y: tableHeight }"
		  bordered
		  :loading="loading"
		>
		</a-table>
		<div class="pagination" style="float: right">
		  <a-pagination
			show-size-changer
			v-model:current="pageIndex"
			v-model:pageSize="pageSize"
			:total="total"
			@show-size-change="onShowSizeChange"
		  />
		</div>
	  </div>
	</div>
  </template>
  
  <script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { getcdsspbqklist } from '/@/api/demo/hoursebase'; //统计工作进展
	import { useUserStore } from '/@/store/modules/user';
	import { iTableData, iTableColumns } from './types/table';
	import { iParams } from './types/params';
	import { useGlobSetting } from '/@/hooks/setting';
	import { downloadByUrl } from '/@/utils/file/download';
  //   import Detail from './component/detailDrawer.vue';
	const userStore = useUserStore();
	const globSetting = useGlobSetting();
	let userInfo = ref<any>(null);
	let detailTableHeight = ref<number>(0); // 表格高度
	let tableHeight = ref<number>(0); // 表格高度
	let pageIndex = ref(1);
	let pageSize = ref(15);
	const value18 = ref<string[]>([]);
	let txtKeyWord = ref<string>('');
	let fwzt = ref<string>('');
	let total = ref(0);
	let data = reactive<{
	  tableData: iTableData[];
	  tableColumns: iTableColumns[];
	  wscolsList: { wch: number }[];
	  id: number | any;
	  loading: Boolean;
	  keyWorld: String;
	  currentqx: string; // 当前行政区名称
	  currentTitle: string;
	  cityToken: string | any;
	}>({
	  // 表格数据
	  tableData: [],
	  tableColumns: [
		{
		  title: '序号',
		  dataIndex: 'index',
		  key: 'index',
		  align: 'center',
		  width: 80,
		},
		{
		  title: '区名称',
		  dataIndex: 'xzq',
		  key: 'xzq',
		  align: 'center',
		  width: 80,
		},
		{
		  title: '现有电动自行车数量',
		  dataIndex: 'bdfwjzrydddzxcsl',
		  key: 'bdfwjzrydddzxcsl',
		  align: 'center',
		  width: 200,
		},
		{
		  title: '现有充电接口数量',
		  dataIndex: 'cdjksl',
		  key: 'cdjksl',
		  align: 'center',
		  width: 150,
		},
		{
		  title: '收取服务费（个村）',
		  dataIndex: 'sqfwfsl',
		  key: 'sqfwfsl',
		  align: 'center',
		  width: 150,
		},
		{
		  title: '小于0.513元',
		  dataIndex: 'xy',
		  key: 'xy',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '等于0.513元',
		  dataIndex: 'xd',
		  key: 'xd',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '大于0.513元',
		  dataIndex: 'dy',
		  key: 'dy',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '从事外卖、闪送、代驾等职业的人数',
		  dataIndex: 'czryrs',
		  key: 'czryrs',
		  align: 'center',
		  width: 290,
		},
	  ],
	  id: null,
	  loading: true,
	  keyWorld: '',
	  cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
	  currentqx: '', // 当前行政区名称
	  currentTitle: '', // 当前详情标题
	  wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
	});
	// 表格的 ref Dom名称
	let { tableData, loading, currentqx, currentTitle } = toRefs(data);
	async function getData() {
	  const { role } = userInfo.value;
  
	  let groupname = '';
	  if (role === 'City') {
		groupname = 'qxmc';
	  } else if (role === 'Area') {
		groupname = 'jzmc';
	  } else if (role === 'Street') {
		groupname = 'czmc';
	  }
	  let params: iParams = {
		groupname: groupname,
		pageIndex: pageIndex.value,
		pageSize: pageSize.value,
	  };
	  loading.value = true;
	  let res: any = await getcdsspbqklist(params);
	  console.log('@res--工作进入汇总表', res.items);
	 if (res || res.items.length > 0) {
      loading.value = false;
      // console.log('data', data);
      // 算列和
      let bdfwjzrydddzxcsl = vtotal(res.items, 'bdfwjzrydddzxcsl');
      let cdjksl = vtotal(res.items, 'cdjksl');
      let sqfwfsl = vtotal(res.items, 'sqfwfsl');
	  let xy = vtotal(res.items, 'xy');
      let xd = vtotal(res.items, 'xd');
      let dy = vtotal(res.items, 'dy');
	  let czryrs = vtotal(res.items, 'czryrs');
      let index_count = res.items.length + 1;
      let allObj = {
        xzq: '汇总',
        bdfwjzrydddzxcsl: bdfwjzrydddzxcsl,
        cdjksl: cdjksl,
        sqfwfsl: sqfwfsl,
        index: index_count,
        xy: xy,
        xd: xd,
		dy: dy,
		czryrs: czryrs,
      };
	  loading.value = false;
      data.tableData = [...res.items, allObj];
	  total.value=res.total;
		
	  }
	}
   // 计算总数的方法
   function vtotal(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }
	function getUserInfo() {
	  const userStore = useUserStore();
	  userInfo.value = userStore?.getUserInfo;
	}
  
	function searchBtn() {
	  data.loading = true;
	  getData();
	}

	const displayColumns = computed(() => {
	  const { role } = userInfo.value;
	  let arr: any[] = [];
	  if (role === 'City') {
		// qx
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
		return arr;
	  } else if (role === 'Area') {
		// jz
		arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
		return arr;
	  } else if (role === 'Street') {
		// cun
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
		console.log('@Aarr', arr);
		return arr;
	  } else {
		return data.tableColumns;
	  }
	});
	function handleExport() {
	
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
	let xzqdm="";
	let towndm="";
	let villagedmdm="";
	if(value18.value[0]!=undefined)
	{
		xzqdm=value18.value[0];
	}
	if(value18.value[1]!=undefined)
	{
		towndm=value18.value[1];
	}
	if(value18.value[2]!=undefined)
	{
		villagedmdm=value18.value[2];
	}
	let val=txtKeyWord.value;
	let strFwzt=fwzt.value;
    downloadByUrl({
      url:
        uriBase +
        '/static/cdsspbqk/cdsspbqkExportExcel?access_token=' +
        tk +
		'&txtKeyWord='+val+
		'&fwzt='+strFwzt+
		'&xzqdm=' +
		xzqdm +
        '&towndm=' +
        towndm  +
        '&villagedm=' + villagedmdm,
      target: '_blank',
    });
  }

	const getTableHeight = () => {
	  setTimeout(() => {
		detailTableHeight.value = window.innerHeight;
		tableHeight.value = window.innerHeight;
	  });
	};
	watch(pageSize, () => {
	  console.log('pageSize', pageSize.value);
	  getData();
	});
	watch(pageIndex, () => {
	  console.log('current', pageIndex.value);
	  getData();
	});
	onBeforeMount(() => {
	  getUserInfo();
	});
	onMounted(() => {
	  console.log('******工作进展统计初始化******');
	  getData();
	  getTableHeight();
	 // getTableData();
	});
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
	#map {
	  height: calc(100vh - 140px);
	}
  
	.x-houseMng-search {
	  z-index: 100;
	  margin: 6px;
	  position: absolute;
	}
  
	.root-house-mng-main {
	  margin: 6px;
	}
  
	.x-village-tabs {
	  //z-index: 100;
	  //position: absolute;
	  width: 60vw;
	  margin-top: 6px;
	  margin-left: 40px;
	  //background-color: rgba(34, 34, 34, 0.6);
	  :deep(.ant-form) {
		margin-top: 6px;
	  }
  
	  // :deep(.ant-form-item-label) > label {
	  //   color: white;
	  // }
	}
  </style>
  